﻿@model List<TBlog.Web.Models.Article>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_BlogLayoutPage.cshtml";
 
}
<link href="~/Content/blog/blogindex.css" rel="stylesheet" />
<style>

</style>

@*<div class="nav-image text-center">导航图</div>*@
<div class="nav-category category-fixed">
    <ul class="menu-category">
        <li><span class="active" data-categoryid="0">全部分类</span></li>
        <li><span data-categoryid="1">随笔</span></li>
        <li><span data-categoryid="2">技术</span></li>
        <li><span data-categoryid="3">生活</span></li>
        <li><span data-categoryid="4">工作</span></li>
        <li><span data-categoryid="5">转载</span></li>
    </ul>

</div>
<div class="contentbody">
    <div class="centetcontent">
        <div class="post-list">
            <ul>
                @* <li>
                    <span class="category-tag" data-tagid="2">[javascript]</span>
                    <a href="">Git Flow最流行的代4444sdfffffffffffffffffffffffffffffffffffffffffffffffffffffff4444444444码管理模型</a>
                    <div class="test1" style="position: absolute; top: 0; right: 18%">1111</div>
                    <time class="date">Junly 2017</time>
                </li>
                <li>
                    <span class="category-tag" data-tagid="4">[javascript]</span>
                    <a href="">Git Flow最流行的代手机打开房间阿里山扩大解放路口管理模型</a>
                    <div class="test1" style="position: absolute; top: 0; right: 18%">4444</div>
                    <time class="date">Junly 2017</time>?id=@item.ID
                </li>*@
                @foreach (var item in Model)
                {
                    <li>
                        <span class="category-tag" data-tagid="@item.Tags">[@item.Tags]</span>
                        <a href="@Url.Action("Detail", "Home", new { id = item.ID })" target="_blank">@item.Title</a>
                        <time class="date">@item.CreateTime</time>
                    </li>
                }
            </ul>
            <p class="text-center" style="font-size: 1.7rem; color: slategray;">抱歉，没有更多内容了......</p>
        </div>
    </div>
</div>
<script src="~/Scripts/Common.js"></script>
<script src="~/Scripts/blog/blogindex.js"></script>
@section scripts{
    <script>
        layui.use(['element', 'flow', 'jquery'], function () {
            var $ = layui.jquery, element = layui.element(), flow = layui.flow;
            $(".layui-this").removeClass("layui-this");
            $(".layui-nav li:eq(1)").addClass('layui-this');
            $(".topon").bind("click", function () {
                $("body").animate({ scrollTop: 0 }, 600);
            })

            $(".menu-category span").each(function (i) {
                $(this).click(function () {
                    $(".active").removeClass("active");
                    $(this).addClass("active");
                    var categoryid = $(this).data("categoryid");
               
                    Execute.call($(".post-list ul"), "post", "@Url.Action("Category", "Home")", 'categoryid', categoryid, function (data) {
                        data = JSON.parse(data);
                        binddata(data.Items);
                    })
                })
            })
            bindtagclick();
      

        })
        function binddata(data) {
            var html = '';
            for (var i = 0; i < data.length; i++) {
                html += '<li><span class="category-tag" data-tagid=' + data[i]["Tags"] + '>[' + data[i]["Tags"] + ']</span><a target="_blank" href="@Url.Action("Detail", "Home")?id=' + data[i]["ID"] + '">' + data[i]["Title"] + '</a><time class="date">' + timetostr(data[i]["CreateTime"]) + '</time></li>'
            }
            $(".post-list ul").html(html);
            bindtagclick();
        }
        function bindtagclick() {
            $(".post-list ul li span").each(function () {
                $(this).click(function () {
                    var tagid = $(this).data("tagid");
                    Execute.call($(".post-list ul"), "post", "@Url.Action("Tags", "Home")", 'tag', tagid, function (data) {
                    data = JSON.parse(data);
                    binddata(data);
                })

            })
        })
    }
    function loaddata() {
        $.get("@Url.Action("List", "Home")", function (data, status) {
                var html = ""
                data = JSON.parse(data);
                data = data.Articlelist;
                for (var i = 0; i < data.length; i++) {
                    html += '<li><span class="category-tag" data-tagid=' + data[i]["Tags"] + '>[' + data[i]["Tags"] + ']</span><a target="_blank" href="@Url.Action("Detail", "Home")?id=' + data[i]["ID"] + '">' + data[i]["Title"] + '</a><time class="date">' + timetostr(data[i]["CreateTime"]) + '</time></li>'
                }
                $(".post-list ul").append(html);
            })
        }

        function splittags(tags) {
            var tagstring = '[';
            var str = tags.split(',');
            $.each(str, function (index, item) {
                tagstring += '<a href="@Url.Action("Tags", "Home")?tag=' + item + '">' + item + '</a>,'
            })
            return tagstring.substring(0, tagstring.length - 1) + ']';
            }
            $(function () {

                //loaddata();

            })
            $(window).scroll(function () {
                var height = $(window).scrollTop();
                if (height > 170) {
                    $(".topon").removeClass("blog-hide");
                }
                else {
                    $(".topon").addClass("blog-hide");
                }
            })

          
    </script>
}
